<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <title>Ins Crawler Admin</title>
    <!-- 0.24.0 -->
    <!--    <script src="https://unpkg.com/axios@0"></script>-->
    <!--    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>-->
    <!--    <script src="https://unpkg.com/axios@0.24.0/dist/axios.js"></script>-->
    <script src="./lib/axios@0.24.0/dist/axios.min.js"></script>
    <!-- 3.2.26 -->
    <!--    <script src="https://unpkg.com/vue@next"></script>-->
    <!--    <script src="https://unpkg.com/vue@3"></script>-->
    <script src="./lib/vue@3.2.30/dist/vue.global.js"></script>
    <!-- 4.0.12 -->
    <!--    <script src="https://unpkg.com/vue-router@4"></script>-->
    <script src="./lib/vue-router@4.0.12/dist/vue-router.global.js"></script>
    <!-- 0.6.0 -->
    <!--    <script src="https://unpkg.com/js-sha1@0"></script>-->
    <script src="./lib/js-sha1@0.6.0/src/sha1.js"></script>
    <!-- 2.0.0 -->
    <!--    <script src="https://unpkg.com/encoding-japanese@2.0.0/encoding.min.js"></script>-->
    <script src="./lib/encoding-japanese@2.0.0/encoding.min.js"></script>
    <!-- 1.2.0 -->
    <!--    <script src="https://unpkg.com/zepto@1.2.0/dist/zepto.min.js"></script>-->
    <script src="./lib/zepto@1.2.0/dist/zepto.min.js"></script>
    <!-- 8.0.1 -->
    <link type="text/css" rel="https://necolas.github.io/normalize.css/8.0.1/normalize.css"/>
    <!-- 自适应宽度 -->
    <meta name="viewport" content="maximum-scale=1.5,minimum-scale=1.1,user-scalable=0,initial-scale=1.1"/>
    <!-- config-far.js -->
    <script src="./src/config/config-far.js"></script>
    <!-- common.js -->
    <script src="./src/components/common.js"></script>
    <!-- 基础 -->
    <script src="./src/api/api.js"></script>
    <!-- 状态管理 -->
    <script src="./src/store/store.js"></script>
    <!-- 基础组件 -->
    <script src="src/components/common/gmxhr/xhr-adapter.js"></script>
    <script src="src/components/common/list/list.js"></script>
    <script src="src/components/common/form/form.js"></script>
    <script src="src/components/common/runner/runner-far.js"></script>
    <script src="src/components/common/heartbeat/heartbeat.js"></script>
    <script src="src/components/common/message/message.js"></script>
    <script src="src/components/common/crack/crack.js"></script>
    <!-- 路由组件 -->
    <script src="./src/components/task/task-far.js"></script>
    <script src="./src/components/proxy/proxy.js"></script>
    <script src="./src/components/user/user.js"></script>
    <script src="./src/components/notify-email/notify-email.js"></script>
    <script src="./src/components/config/config.js"></script>
    <!-- css -->
    <script src="./src/css/css.js"></script>
    <!-- app -->
    <script src="./src/app-far.js"></script>
    <!-- 路由 -->
    <script src="./src/router/router.js"></script>
    <!--    <script src="./app.min.js"></script>-->
</head>
<body>
<div id="app-main">

</div>

<div id="app-message">

</div>

<script type="module">

    // axios 自定义油猴适配器
    axios.defaults.adapter = xhrAdapter;
    // axios 自定义超时时间
    axios.defaults.timeout = appConfig.axiosTimeOut;
    let cloneApis = JSON.parse(JSON.stringify(apis));
    // let api = typeof (GM_xmlhttpRequest) === 'undefined' ? build(cloneApis) : buildGm(cloneApis);
    let api = build(cloneApis);
    window.api = api;
    window.zp = Zepto;

    // 3. 创建路由实例并传递 `routes` 配置
    // 你可以在这里输入更多的配置，但我们在这里
    // 暂时保持简单
    const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes, // `routes: routes` 的缩写
    });

    // 5. 创建并挂载根实例
    const app = Vue.createApp(App);

    /**
     * @see <a href="https://blog.csdn.net/qq_27694835/article/details/114243019">Vue3.0 挂载axios全局方法</a>
     * @type {(function(*=): *)|undefined}
     */
    app.config.globalProperties.$api = api;
    //确保 _use_ 路由实例使
    //整个应用支持路由。
    app.use(router);

    app.mount('#app-main');

    // 现在，应用已经启动了！


    // 消息组件 https://blog.csdn.net/hncu1990/article/details/119273475
    const {createApp, h} = Vue;

    const message = (props) => {
        const container = document.createElement("div");
        // 获取组件的DOM，将其挂载到body上
        const vm = createApp({
            render() {
                return h(Message, props);
            },
        });
        const appMessage = document.getElementById("app-message");
        appMessage.appendChild(vm.mount(container).$el);
        // @see <a href="https://v3.cn.vuejs.org/api/application-api.html#unmount">Vue3 unmount</a>
        let {duration = 3} = props;
        setTimeout(() => {
            vm.unmount();
        }, duration * 1000);
        return {
            close: () => (vm.component.proxy.isShow = false),
        };
    };
    app.config.globalProperties.$message = message;
</script>


</body>
</html>